<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <img src="@/assets/logo.png" />
        <span>电商管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <el-container>
      <!-- 侧边区域 -->
      <el-aside :width="!isFlag ? '200px' : '60px' " >
        <!-- 展开折叠按钮 -->
        <i class="change el-icon-s-unfold" v-if="!isFlag" @click="changeFlag"></i>
        <i class="change el-icon-s-fold" v-else @click="changeFlag"></i>
        <!-- 导航区域 -->
        <el-menu background-color="#313743" text-color="#fff" 
        unique-opened	
        router
        :collapse="isFlag"
        :collapse-transition="false"
        :default-active="active"
        >
          <!-- 一级菜单 -->
          <el-submenu :index="item.id + '' " v-for="(item,index) in menuArr" :key="item.id">
            <template slot="title">
              <!-- 图标文件缺失，暂时没想到替换的方法 -->
              <i :class="`el-icon-${ iconObj[index] }`"></i>
              <span>{{ item.authName }}</span>
            </template>
            <!-- 二级菜单 -->
            <!-- index 的值作为开启路由后的访问路径 -->
            <el-menu-item :index=" '/' + subItem.path + '' " @click="saveActivePath('/' + subItem.path + '')" v-for="subItem in item.children" :key="subItem.id">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{ subItem.authName }}</span>
            </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 主体区域 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  created(){
    // 调用获取菜单列表方法
    this.getMenusList();
    //给activePath赋值，实现菜单高亮
    this.active = window.sessionStorage.getItem("activePath");
  },
  data(){
    return{
      // 左侧菜单数据
      menuArr:[],
      // icon图标数据
      iconObj:['user-solid','success', 's-goods', 's-order', 's-marketing'],
      // 菜单折叠开关
      isFlag:false,
      // 激活菜单的index
      active:''
    }
  },
  methods: {
    // 退出功能方法
    logout() {
      // 清除token值
      window.sessionStorage.clear();
      // 跳转到登录页面
      this.$message("已退出登录！");
      this.$router.push("/login");
    },
    // 获取菜单列表功能方法
    async getMenusList(){
      const { data: res} = await this.$http.get("menus");
      // 判断请求是否成功
      if(res.meta.status !== 200) return this.$message.error(this.meta.msg);
      this.menuArr = res.data;
      // console.log(this.menuArr);
    },
    // 开关取反
    changeFlag(){
      this.isFlag = !this.isFlag;
    },
    // 高亮激活菜单功能方法
    activePath(activeInd){
      this.activeInd = activeInd;

    },
    // 保存激活菜单路径
    saveActivePath(activePath){
      window.sessionStorage.setItem("activePath", activePath);
      this.active = activePath;
    }
  },
};
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
// 头部样式
.el-header {
  background-color: #363d3f;
  display: flex;
  justify-content: space-between;
  color: white;
  > div {
    display: flex;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    span {
      margin-left: 15px;
    }
  }
  .el-button {
    height: 40px;
    margin-top: 10px;
  }
}
// 侧边样式
.el-aside {
  background-color: #313743;
  .el-menu{
    overflow: hidden;
    border-right: none;
  }
}
// 主体样式
.el-main {
  background-color: #e9edf0;
}
</style>>